<template>
  <el-scrollbar ref="scrollBar">
    <slot />
  </el-scrollbar>
</template>

<script>
export default {
  name: 'ScrollBar',
  data() {
    return {
      clientHeight: 0
    };
  },
  beforeMount() {
    window.addEventListener('resize', this.resizeClient);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeClient);
  },
  methods: {
    resizeClient() {
      if (!document.hidden) {
        const wrap = this.$refs.scrollBar.$el.querySelector('.el-scrollbar__wrap'),
          verticalThumb = this.$refs.scrollBar.$el.querySelector('.is-vertical .el-scrollbar__thumb');
        if (this.clientHeight != document.body.clientHeight) {
          const heightPercentage = wrap.clientHeight * 100 / wrap.scrollHeight,
            sizeHeight = heightPercentage < 100 ? heightPercentage + '%' : '';
          verticalThumb.style.height = sizeHeight;
        }
        this.clientHeight = document.body.clientHeight;
      }
    }
  }
};
</script>

<style lang="scss" scoped>

</style>
